<template>
  <div class="c-bg-sgray">
    <div class="newTest c-fs24 c-pv10" v-if="logType==2">检测到最新版本，再次练习可获取</div>
    <div class="c-pv20 c-ph24">
      <div v-if="practiceMode == 1" class="c-bg-white c-ph24 c-br12">
        <div @click="stylePractice(item)" v-for="(item, index) in styleList" :key="index"  :class="index!=styleList.length-1?'c-bd-b1-f5':''" class="c-pv20 c-bg-white c-flex-row c-aligni-center c-justify-sb ">
          <div class="c-ww300">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{styleName[item.type]}}</div>
          </div>
          <div class="c-flex-row c-aligni-center">
            <div class="c-fs20 c-fc-gray  c-mr10">{{item.answerTotal}}/{{item.hasQuestionNum}} 道</div>
            <div class="c-fs30 c-fc-sgray iconfont">&#xe635;</div>
          </div>
        </div>
      </div>
      <div v-if="practiceMode == 2">
        <practice-chapter :ttId="ttId" :tpId="tpId" :tlId="tlId" :progress="progress" :isWrong="false" :practiceId="practiceId" @updatelogType='updatelogType'></practice-chapter>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import PracticeChapter from "@/components/templates/examination/practiceChapter.vue";
// let searchText; //搜索输入框
export default {
  name: "PracticeModes",
  components: {
    PracticeChapter
  },
  props: [],
  data() {
    return {
      practiceMode: 1,
      practiceId: 0,
      styleList: [],
      styleName: {
        '1': '单选题',
        '2': '多选题',
        '3': '问答题',
        '4': '判断题',
        '5': '填空题',
        '9': '阅读理解题',
        '10': '材料演示题',
        '11': '完型填空题',
      },
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
      logType:1
    };
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    stylePractice(item) {
      if (item.testInfo.status == 2) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionResult',
          query: {
            examMainId: item.testInfo.examMainId,
            type: 4, //1:顺序练习 2:随机练习
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: 100,
          }
        })
      } else if (item.testInfo.status == 1) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: {
            libraryId: this.practiceId,
            type: 4,
            questionType: item.type,
            goOnNum: item.answerTotal + 1 > item.hasQuestionNum ? item.answerTotal : item.answerTotal + 1,
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: this.progress,
          }
        })
      } else {
        this.takePartIn(4, item);
      }
    },
    //加入考试
    takePartIn(mode, item) {
      let $this = this;
      let data = {};
      if (mode == 4) {
        data = {
          libraryId: this.practiceId,
          type: mode,
          questionType: item.type,
        }
      } else if (mode == 3) {
        data = {
          libraryId: this.practiceId,
          type: mode,
          rId: item.rId,
        }
      }
      utilJs.postMethod(`${global.apiurl}itemBank/takePartIn`, data, function (
        res
      ) {
        let queryT = {
          libraryId: $this.practiceId,
          type: mode,
          goOnNum: 1,
          ttId: $this.ttId,
          tpId: $this.tpId,
          tlId: $this.tlId,
          progress: $this.progress,
        }
        if (mode == 3) {
          queryT.rId = item.rId;
        }
        if (mode == 4) {
          queryT.questionType = item.type;
        }
        $this.$routerGo($this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: queryT
        })
      })
    },
    updatelogType(logType) {
      this.logType = logType
    },
    //获取题型列表
    getStyleList() {
      let getUrl = global.apiurl + "itemBank/styleList/" + this.practiceId
      utilJs.getMethod(getUrl, res => {
        this.styleList = res.list;
        this.logType = res.logType
      })
    },
    //分享
    wechatShare: function () {
      let title = "练习列表";
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
  },
  mounted() {
    this.practiceMode = this.$route.query.practiceMode || 1;
    if (this.practiceMode == 1) {
      setDocumentTitle("题型练习");// eslint-disable-line
    } else {
      setDocumentTitle("章节练习");// eslint-disable-line
    }
    this.practiceId = this.$route.query.practiceId || 0;
    this.styleList = [];
    this.chapterInfo = {};
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    if (this.practiceMode == 1) {
      this.getStyleList();
    } else {
      // this.getChapterList();
    }
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-practice {
  background: linear-gradient(90deg, rgb(154, 170, 255) 0%, rgba(108, 131, 2555, 1) 100%);
}
.p-b-80 {
  bottom: -2rem;
}
.newTest{
  background: #FEF2EB;
  color: #FF300C;
  text-align: center;

}
</style>


